import { HomeOutlined, UserOutlined } from '@ant-design/icons'
import { System } from '@icon-park/react'
import { ConfigProvider } from 'antd'
import zhCN from 'antd/locale/zh_CN'
import { useLayoutEffect } from 'react'
import { EmptyIcon } from '@/components'
import { Layouts } from '@/layout'
import Router from '@/routes'
import { MenuItem, useMenuStore } from '@/store'
import './App.less'

const menus: MenuItem[] = [
  {
    key: '/',
    label: '首页',
    icon: <HomeOutlined />,
  },
  {
    key: '/system',
    label: '系统管理',
    icon: <System />,
    children: [
      {
        key: '/system/product',
        label: '产品管理',
        icon: <EmptyIcon />,
      },
      {
        key: '/system/user',
        label: '用户管理',
        icon: <UserOutlined />,
      },
    ],
  },
]

function App() {
  useLayoutEffect(() => {
    useMenuStore.getState().setMenus(menus)
    Layouts.tabBar.addItem({
      key: '/',
      title: '首页',
      closable: false,
    })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        token: {
          fontFamily:
            "Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif",
        },
        components: {
          Popover: {
            padding: 0,
          },
          Table: {
            cellPaddingBlock: 12,
          },
        },
      }}
    >
      <Router />
    </ConfigProvider>
  )
}

export default App
